import React, { memo } from "react";

interface GuideLinesProps {
  containerWidth: number;
  containerHeight: number;
  draggableX: number;
  draggableY: number;
  draggableWidth: number;
  draggableHeight: number;
  isDragging: boolean;
}

// 使用 memo 优化重渲染
const GuideLines = memo<GuideLinesProps>(
  ({
    containerWidth,
    containerHeight,
    draggableX,
    draggableY,
    draggableWidth,
    draggableHeight,
    isDragging,
  }) => {
    if (!isDragging) return null;

    // 计算拖拽元素的各个边界位置
    const elementLeft = draggableX;
    const elementRight = draggableX + draggableWidth;
    const elementTop = draggableY;
    const elementBottom = draggableY + draggableHeight;
    const elementCenterX = draggableX + draggableWidth / 2;
    const elementCenterY = draggableY + draggableHeight / 2;

    // 画布的中心线位置
    const containerCenterX = containerWidth / 2;
    const containerCenterY = containerHeight / 2;

    // 基准线样式
    const lineStyle: React.CSSProperties = {
      position: "absolute",
      backgroundColor: "#1890ff",
      zIndex: 1000,
      pointerEvents: "none",
    };

    // 垂直线样式
    const verticalLineStyle: React.CSSProperties = {
      ...lineStyle,
      width: "1px",
      height: "100%",
      top: 0,
    };

    // 水平线样式
    const horizontalLineStyle: React.CSSProperties = {
      ...lineStyle,
      height: "1px",
      width: "100%",
      left: 0,
    };

    // 判断是否需要显示各种基准线（容差为5像素）
    const tolerance = 5;
    const showLeftEdgeLine = Math.abs(elementLeft) < tolerance;
    const showRightEdgeLine =
      Math.abs(elementRight - containerWidth) < tolerance;
    const showTopEdgeLine = Math.abs(elementTop) < tolerance;
    const showBottomEdgeLine =
      Math.abs(elementBottom - containerHeight) < tolerance;
    const showVerticalCenterLine =
      Math.abs(elementCenterX - containerCenterX) < tolerance;
    const showHorizontalCenterLine =
      Math.abs(elementCenterY - containerCenterY) < tolerance;

    return (
      <>
        {/* 左边界线 */}
        {showLeftEdgeLine && (
          <div
            style={{
              ...verticalLineStyle,
              left: 0,
            }}
          />
        )}

        {/* 右边界线 */}
        {showRightEdgeLine && (
          <div
            style={{
              ...verticalLineStyle,
              right: 0,
            }}
          />
        )}

        {/* 上边界线 */}
        {showTopEdgeLine && (
          <div
            style={{
              ...horizontalLineStyle,
              top: 0,
            }}
          />
        )}

        {/* 下边界线 */}
        {showBottomEdgeLine && (
          <div
            style={{
              ...horizontalLineStyle,
              bottom: 0,
            }}
          />
        )}

        {/* 垂直中心线 */}
        {showVerticalCenterLine && (
          <div
            style={{
              ...verticalLineStyle,
              left: containerCenterX,
            }}
          />
        )}

        {/* 水平中心线 */}
        {showHorizontalCenterLine && (
          <div
            style={{
              ...horizontalLineStyle,
              top: containerCenterY,
            }}
          />
        )}

        {/* 元素边界提示线 */}
        {isDragging && (
          <>
            {/* 元素左边界线 */}
            <div
              style={{
                ...verticalLineStyle,
                left: elementLeft,
                backgroundColor: "#52c41a",
                opacity: 0.6,
              }}
            />

            {/* 元素右边界线 */}
            <div
              style={{
                ...verticalLineStyle,
                left: elementRight,
                backgroundColor: "#52c41a",
                opacity: 0.6,
              }}
            />

            {/* 元素上边界线 */}
            <div
              style={{
                ...horizontalLineStyle,
                top: elementTop,
                backgroundColor: "#52c41a",
                opacity: 0.6,
              }}
            />

            {/* 元素下边界线 */}
            <div
              style={{
                ...horizontalLineStyle,
                top: elementBottom,
                backgroundColor: "#52c41a",
                opacity: 0.6,
              }}
            />
          </>
        )}
      </>
    );
  },
);

GuideLines.displayName = "GuideLines";

export default GuideLines;
